<template>
	<view class="container">
	 <b-navigator :active-index="activeIndex"></b-navigator>
	 <b-header></b-header>
	 <view class='main'>
		 <!-- 老年服务展示 -->
		 
		 <view class="common-list-wrap">
			 <view class="header-title">
			 	<view class="title">老年服务</view>
			 </view>
			 <!-- 列表 -->
			 <view class="product-card-list">
				<view class="left-product-card" @click="handleServieView(productList[0].id)">
			 		<view class="image-wrap"><image :src="baseUrl + productList[0].imgUrl" mode="aspectFill"></image></view>
			 		<view class="product-des-wrap">
			 			<view class="product-title">{{ productList[0].title.slice(0,20) }}</view>
			 			<text class="product-des">{{ productList[0].content.slice(0,40) }}</text>
			 		</view>
			 	</view>
			 	<view class="right-cards-wrap">
			 		<view
			 			v-for="(item, index) in productList"
			 			class="right-card"
			 			@click="handleServieView(item.id)"
			 			v-show="index > 0 && index <= 4"
						:key='index'>
			 			<view class="image-wrap"><image :src="baseUrl + item.imgUrl" mode="aspectFill"></image></view>
			 			<view class="product-des-wrap">
			 				<view class="product-title">{{ item.title.slice(0,15) }}</view>
			 				<text class="product-des">{{ item.content.slice(0,20) }}</text>
			 			</view>
			 		</view>
			 	</view>
		    </view>
		 
	    </view>
	</view> 
	 <view class="main">
	 	<!-- 新闻中心 -->
	 	<view class="common-list-wrap">
	 		<view class="header-title">
	 			<view class="title">新闻资讯</view>
	 		</view>
	 		<view class="news-list-wrap">
	 			<view class="left-news-list">
	 				<view
	 					v-for="(item, index) in newsList"
	 					v-show="index > 0 && index <= 4"
	 					class="news-list-item"
	 					:key="index"
						@click="handleNewsView(item.id)"
						>
	 					<view class="news-date">{{ item.createTime.slice(0,10) }}</view>
	 					<view class="news-title">{{ item.title.slice(0,30) }}</view>
	 					<view class="news-des">{{ item.content.slice(0,40)}}</view>
	 				</view>
	 			</view>
	 			<view class="right-news-card" @click="handleNewsView(newsList[0].id)">
	 				<view class="news-date-tag">
	 					<view class="main-tag-title">{{ newsList[0].createTime.slice(8,10)}}</view>
	 					<view class="sub-tag-title">{{ newsList[0].createTime.slice(0,7) }}</view>
	 				</view>
	 				<view class="title-image-wrap"><image :src="baseUrl + newsList[0].imgUrl" mode="aspectFill"></image></view>
	 				<view class="news-content">
	 					<view class="news-title">{{ newsList[0].title.slice(0,20) }}</view>
	 					<view class="news-des">{{ newsList[0].content.slice(0,44) }}</view>
	 				</view>
	 			</view>
	 		</view>
	 	</view>
	</view>
	  
	  <b-footer></b-footer>
	</view>
</template>

<script>
	import bNavigator from '../../components/b-navigator.vue'
	import bFooter from '../../components/b-footer.vue'
	import bHeader from '../../components/b-header.vue'
	import { login, noticeList } from '../../config/api'
	import { route } from '@/uni_modules/uview-plus';
	import { baseUrl } from '../../config/config';

	export default {
		components: { bNavigator, bFooter, bHeader },
		data() {
			return {
				title: '首页',
				activeIndex: '/pages/index/index',
				productList: [{title: '快速减肥有可能导致“臭氧脸', imgUrl: '/profile/upload/2024/06/28/MAIN1718845050893ABNHO150MS_20240628093027A006.png', content: '近些年来，司美格鲁肽（用于治疗成年2型糖尿病患者的药物，它也有减肥功效）之类的抑制食欲的药物被不少人所推崇。然而，它也有不可忽视的副作用'}],
			    newsList: [{title: "关于和平共处五项原则，习近平主席这样说",
				imgUrl: "/profile/upload/2024/06/28/MAIN1719528434426GJ4TYX7GGN_20240628092317A001.jpg",
				content: "今年是和平共处五项原则发表70周年。", createTime: '2024-06-26 '}],
				baseUrl: baseUrl.slice(0,baseUrl.length-1)
			}
		},
		onLoad() {
			this.getLogin()
			

		},
		onShow() {
			
		},
		methods: {
			getLogin() {
				login({ username:"admin",password:"admin123"}).then(res => {
					console.log('成功！！！')
					 window.localStorage.setItem('admin-token', res.token)
					this.getOldServiceList()
					this.getNewsList()
					 
				})
			},
		 getOldServiceList() {
				const queryParams = {
						noticeType: '4',
						pageNum: 1,
						pageSize: 10
				}
			noticeList(queryParams).then(res => {
					this.productList = res.rows
					this.productList.forEach(item => {
						let re1 = new RegExp("<.+?>", "g");
						 
						// 2、将富文本编辑器生成的文本进行替换
						item.content = item.content.replace(re1, "");
					})
				})
				
			},
			getNewsList() {
							const queryParams = {
									noticeType: '2',
									pageNum: 1,
									pageSize: 10
							}
						noticeList(queryParams).then(res => {
								this.newsList = res.rows
								this.newsList.forEach(item => {
									let re1 = new RegExp("<.+?>", "g");
									 
									// 2、将富文本编辑器生成的文本进行替换
									item.content = item.content.replace(re1, "");
								})

							})
							
						},
			// 
			handleServieView(viewId) {
					route('/pages/oldservice/view', {
						id: viewId
					});
			},
			handleNewsView(viewId) {
				route('/pages/news/view', {
					id: viewId
				});
			}
		

		}
	}
</script>

<style>
	.main {
		margin: 0 auto;
	}
	.common-list-wrap {
		width: 100%;
		padding: 0 10px;
		
		
		.header-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20px;
		
			.title {
				font-size: 22px;
				font-weight: bold;
				position: relative;
				z-index: 1;
				content: #ea6101;
		
				&:after {
					position: absolute;
					left: -5px;
					top: 0;
					z-index: -1;
					color: #ea6101;
					content: '';
					background-color: #ea6101;
					width: 20px;
					height: 20px;
					border-radius: 50%;
				}
			}
		}
		

		.product-card-list {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			font-size: 20px;
		
			.left-product-card {
				width: 50%;
				height: 400px;
				margin-right: 20px;
				border-radius: 4px;
				background-color: #ffffff;
				box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
		
				.image-wrap {
					height: 300px;
					overflow: hidden;
		
					image {
						border-top-left-radius: 4px;
						border-top-right-radius: 4px;
						transition: all 0.3s linear;
						width: 100%;
						height: 300px;
					}
				}
		
				.product-des-wrap {
					padding: 10px;
		
					.product-title {
						font-weight: bold;
						margin-bottom: 5px;
					}
		
					.product-des {
						color: #888888;
						font-size: 16px;
					}
				}
		
				&:hover {
					background-color: #ea6101;
		
					image {
						transform: scale(1.1);
					}
		
					.product-des-wrap {
						color: #ffffff;
		
						.product-des {
							color: #ffffff;
						}
					}
				}
			}
		
			.right-cards-wrap {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;
				width: 50%;
		
				image {
					width: 100%;
					height: 140px;
				}
		
				.right-card {
					width: 49%;
					height: 195px;
					background-color: #ffffff;
					border-radius: 4px;
					box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
					margin-bottom: 10px;
		
					.product-des-wrap {
						padding: 2px 5px;
		
						.product-title {
							font-size: 18px;
							font-weight: bold;
						}
		
						.product-des {
							color: #888888;
							font-size: 16px;
							
						}
					}
		
					&:hover {
						background-color: #ea6101;
		
						image {
							transform: scale(1.1);
						}
		
						.product-des-wrap {
							color: #ffffff;
		
							.product-des {
								color: #ffffff;
							}
						}
					}
				}
		
				.bottom-card {
					width: 100%;
					height: 190px;
					background-color: #ffffff;
					border-radius: 4px;
		
					&:hover {
						background-color: #ea6101;
		
						image {
							transform: scale(1.1);
						}
		
						.product-des-wrap {
							color: #ffffff;
		
							.product-des {
								color: #ffffff;
							}
						}
					}
				}
		
				.image-wrap {
					height: 140px;
					overflow: hidden;
		
					image {
						border-top-left-radius: 4px;
						border-top-right-radius: 4px;
						transition: all 0.3s linear;
						width: 100%;
						height: 140px;
					}
				}
			}
		}
	    
		.news-list-wrap {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
		
			.left-news-list {
				margin: 0 20px 0 -10px;
				font-size: 20px;
				width: 50%;
		
				.news-list-item {
					padding: 10px;
					border-radius: 4px;
					background-color: #ffffff;
					box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
					margin-bottom: 10px;
					position: relative;
		
					&:last-child {
						margin: 0;
					}
		
					.news-date {
						color: #ea6101;
						margin-bottom: 5px;
					}
		
					.news-date,
					.news-title {
						font-weight: bold;
						margin-bottom: 5px;
					}
		
					.news-des {
						font-size: 16px;
						color: #888888;
					}
		
					&:after {
						content: '';
						width: 0;
						height: 4px;
						background-color: #ea6101;
						position: absolute;
						left: 0;
						bottom: 0;
						transition: all 0.2s linear;
						border-bottom-right-radius: 4px;
						border-bottom-left-radius: 4px;
					}
		
					&:hover::after {
						width: 100%;
					}
				}
			}
		}
		
		.right-news-card {
			background-color: #ffffff;
			border-radius: 4px;
			position: relative;
			box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
			width: 50%;
		
			.news-date-tag {
				width: 60px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 20px 5px;
				background-color: #ea6101;
				color: #ffffff;
				position: absolute;
				top: -20px;
				left: 20px;
				z-index: 2;
		
				.main-tag-title {
					font-size: 18px;
					font-weight: bold;
				}
		
				.sub-tag-title {
					font-size: 12px;
				}
			}
		
			.title-image-wrap {
				position: relative;
				overflow: hidden;
		
				image {
					width: 100%;
					height: 350px;
					border-top-left-radius: 4px;
					border-top-right-radius: 4px;
					transition: all 0.3s linear;
				}
			}
		
			.news-content {
				padding: 10px;
		
				.news-title {
					font-weight: bold;
					margin-bottom: 5px;
				}
		
				.news-des {
					font-size: 16px;
					color: #888888;
				}
			}
		
			&:hover {
				background-color: #ea6101;
		
				.title-image-wrap {
					image {
						transform: scale(1.1);
					}
				}
		
				.news-content {
					color: #ffffff;
		
					.news-des {
						color: #ffffff;
					}
				}
			}
		}
		
	
	}

/* 小屏幕适配 */
@media screen and (max-width: 960px) {
	.common-list-wrap {
		padding: 0;
	
		.header-title {
			.title {
				font-size: 36rpx;
			}
		}
	
		.product-card-list {   
			flex-direction: column;
			.product-des-wrap {
				.product-title {
					font-size: 32rpx;
				}
			}
	
			.left-product-card {
				width: 100% !important;
				height: 360rpx;
				margin: 0 auto 20rpx;
	
				.image-wrap {
					height: 150px;
	
					image {
						height: 150px;
					}
				}
			}
	
			.right-cards-wrap {
				width: 100% !important;
	
				.left-card,
				.right-card {
					.product-des-wrap {
						.product-title {
							font-size: 28rpx;
						}
					}
					height: 320rpx;
					margin-bottom: 20rpx;
				}
			}
	
			.product-des {
				display: none !important;
			}
		}
	
		.news-list-wrap {
			flex-direction: column;
	
			.left-news-list {
				width: 100%;
				margin: 0 0 40rpx 0;
	
				.news-list-item {
					border-radius: 4px;
					background-color: #ffffff;
					border-bottom: 4px solid #ea6101;
					box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
					margin-bottom: 20rpx;
	
					.news-date {
						font-size: 28rpx;
					}
	
					.news-title {
						font-size: 34rpx;
					}
	
					.news-des {
						font-size: 28rpx;
					}
	
					&:last-child {
						margin-bottom: 0;
					}
				}
			}
	
			.right-news-card {
				width: 100%;
				display: none;
			}
		}
	}
}
</style>
